<script>
	window.config = {
		title: "Toolbox",
		page: "page/shortcut.html",
	};
</script>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="resources/css/base.css">
	<link rel="stylesheet" href="resources/css/wnd.css">
	<style>
		.ico-min-white { background:no-repeat url('');
			background-position: top; background-size: cover;
		}
		.ico-min { background:no-repeat url('');
			background-position: top; background-size: cover;
		}
		.ico-max-white { background:no-repeat url('');
			background-position: top; background-size: cover;
		}
		.ico-max { background:no-repeat url('');
			background-position: top; background-size: cover;
		}
		.ico-restore-white { background:no-repeat url('');
			background-position: top; background-size: cover;
		}
		.ico-restore { background:no-repeat url('');
			background-position: top; background-size: cover;
		}
		.ico-close-white { background:no-repeat  url('');
			background-position: top; background-size: cover;
		}
		.ico-close { background:no-repeat  url('');
			background-position: top; background-size: cover;
		}
	</style>
	<style>
		html, body {
			margin:0;
			padding:0;
			height:100%;
			width:100%;
			overflow: hidden;
		}
		
		.window-title-bar {
			width:100%;
			height:30px;
			background: dodgerblue;
			-webkit-app-region: drag;
			line-height:30px;
			padding:0 0 0 10px;
			box-sizing: border-box;
		}
		
		
		.window-title-bar .title {
			display:inline-block;
			width: calc(100% - 135px - 20px);
			height:100%;
			padding-right:10px;
			box-sizing: border-box;
			overflow: hidden;
			text-overflow: ellipsis;
			padding-right:10px;
			font-size: 15px;
		}
		
		
		.window-title-bar .system-button {
			display:inline-block;
			width: 135px;
			height:100%;
			text-align:right;
			float:right;
			font-size: 0;
		}
		
		
		.window-title-bar .system-button i {
			-webkit-app-region: no-drag;
			width:38px;
			height:100%;
			padding:0;
			margin:0;
			background:none;
			border:none;
			display: inline-block;
			font-size: 12px;
			cursor: default;
			text-align: center;
			vertical-align: middle;
			line-height:30px;
		}
		
		.window-title-bar .system-button i span {
			width: 16px;
			height:16px;
			display: inline-block;
			position: relative;
			top:6px;
		}
		
		.window-title-bar .system-button i.max {  font-size: 22px;  }
		.window-title-bar .system-button i.close {  font-size: 22px;  }
		
		.window-title-bar .system-button i:hover {
			background: rgba(128,128,128,0.5);
		}
		
		.window-title-bar .system-button i.close:hover {
			background: rgba(255,12,12,0.7);;
		}
		
		
		.window-content {
			width:100%;
			height:calc(100% - 30px);
			border:0;
			margin: 0;
			padding:0;
		}
	</style>
</head>
<body id="body">
	<div class="window-title-bar">
		<span class="title">
			<img src=""><span id="title"></span>
		</span><span class="system-button">
			<i class="min" onclick="nw.Window.get().minimize()"><span class="ico-min"></span></i>
			<i class="max" id="sys_maximize_button" current=""><span class="ico-max" restore-class="ico-restore" max-class="ico-max"></span></i>
			<i class="close" onclick="nw.App.quit()"><span class="ico-close"></span></i>
		</span>
	</div>
	<iframe id="window" class="window-content" ></iframe>
	<script>
		nw.Window.get().on('maximize', function() {
			let maximizeButton = document.getElementById('sys_maximize_button');
			maximizeButton.setAttribute('current', 'max');
			let img = maximizeButton.querySelector('span');
			img.className = img.getAttribute('restore-class');
		});
		
		nw.Window.get().on('restore', function() {
			let maximizeButton = document.getElementById('sys_maximize_button');
			maximizeButton.setAttribute('current', '');
			let img = maximizeButton.querySelector('span');
			img.className = img.getAttribute('max-class');
		});
		
		document.getElementById('sys_maximize_button').addEventListener('click', function() {
			if(this.getAttribute('current') == 'max') {
				nw.Window.get().restore();
			} else {
				nw.Window.get().maximize();
			}
		});
		
		document.getElementById('title').innerHTML = config.title;
		document.getElementById('window').src = config.page;
		window.onload = function() {
			nw.Window.get().show();
		};

	</script>
</body>
</html>